import React from 'react';
import { FormPanel, InputType, FormPanelBtnDisplay, FormPanelObject } from 'lfun-bg-comp';
import { Button, Col, Row, Table } from 'antd';
import { useNavigate } from 'react-router';
import { PAGINATIONCONFIG } from '@/constant/page';
import useFetchData from '@/hooks/useFetchData';
// import * as PageApi from '@/server/action/model-view/model';

const template = [
  {
    title: '',
    span: 8,
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
    inputs: [
      {
        label: '园所名称',
        name: 'name',
        key: 'name',
      },
      {
        label: '机构编码',
        name: 'orgCode',
        key: 'orgCode',
      },
      {
        label: '审核类型',
        name: 'auditType',
        key: 'auditType',
        inputType: InputType.select,
        renderOption: [
          { label: '全部', value: '1' },
          { label: '已审核', value: '2' },
        ],
      },
      {
        label: '发起时间',
        name: 'time',
        key: 'time',
        inputType: InputType.date,
      },
      {
        label: '发起人',
        name: 'sender',
        key: 'sender',
      },
    ],
  },
];

const App: React.FC = () => {
  const navigate = useNavigate();

  const columns = [
    {
      title: '编号',
      dataIndex: 'code',
      key: 'code',
    },
    {
      title: '园所名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '机构编码',
      dataIndex: 'orgCode',
      key: 'orgCode',
    },
    {
      title: '审核类型',
      dataIndex: 'auditType',
      key: 'auditType',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: '发起日期',
      dataIndex: 'createDate',
      key: 'createDate',
    },
    {
      title: '发起人',
      dataIndex: 'sender',
      key: 'sender',
    },
    {
      title: '当前审批节点',
      dataIndex: 'currentNode',
      key: 'currentNode',
    },
    {
      title: '审批人',
      dataIndex: 'checkUser',
      key: 'checkUser',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => <Button type="link">审核</Button>,
    },
  ];

  const fetchData = async ({ current, pageSize, ...others }) => {
    // 这里写你的数据获取逻辑，例如请求后端API
    return { data: [], total: 0, success: true };
    //   await PageApi.searchTableList({
    //   page: current,
    //   size: pageSize,
    //   ...others,
    // });
  };

  const { data, loading, pagination, setForm, setPagination, loadData } = useFetchData(fetchData);

  const handleTableChange = page => {
    const { current, pageSize, total } = page;
    setPagination({ current, pageSize, total });
  };

  return (
    <>
      <Row style={{ padding: 10 }}>
        <Col span={24}>
          <FormPanel
            buttonsDisplay={FormPanelBtnDisplay.inline}
            submitBtnText="筛选"
            onFinish={formPanelObject => {
              const params = formPanelObject.getFieldsValue();
              loadData(params);
              return false;
            }}
            onLoad={(formPanelObject: FormPanelObject) => {
              setForm(formPanelObject);
            }}
            template={template}
          />
        </Col>
      </Row>
      <Row style={{ padding: 10 }}>
        <Col span={24}>
          <Table
            dataSource={data}
            columns={columns}
            loading={loading}
            scroll={{ x: 1000 }}
            pagination={{ ...PAGINATIONCONFIG, ...pagination }}
            onChange={handleTableChange}
          />
        </Col>
      </Row>
    </>
  );
};

export default App;
